<template>
  <div>
    <el-table
      v-bind="$attrs"
      v-on="$listeners"
      :data="dataList"
      class="full-width"
      row-key="id"
      v-loading="loading"
    >
      <el-table-column v-if="$listeners['selection-change']"
              type="selection"
               :selectable="selectable"
              width="55"/>
      <el-table-column align="left" type="index" label="序号" width="60" v-if="showNo">
        <template slot-scope="scope">
          {{(queryParams.page-1)*queryParams.per_page+scope.$index+1}}
        </template>
      </el-table-column>
      <slot :data="dataList"></slot>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.per_page"
      @pagination="getList"
    />
  </div>
</template>
<script>
export default {
  name: "SimpleTable",
  props: {
    apiUrl: {
      type: String,
      default: ""
    },
    apiFun: {
      type: String,
      default: "getList"
    },
    showNo:{
      type: Boolean,
      default:true
    },
    params:{
      type:Object,
      default:function () {
        return {}
      }
    }
  },
  data() {
    return {
      dataList: [],
      total: 0,
      queryParams: {
        per_page: 10,
        page: 1,
        search_value: ""
      },
      loading: false
    };
  },
  created() {
    this.queryParams = {...this.queryParams,...this.params};
    this.getList();
  },
  watch: {
    params(val, oldVal){
      if(JSON.stringify(val)!=JSON.stringify(oldVal)){//有出现内容相同，但地址不同的情况，所以转string
        this.searchList(val)
      }
    }
  },
  methods: {
    selectable(row, index){
     if(this.$attrs.selectable){
       return this.$attrs.selectable(row, index)
     }else{
       return true;
     }
    },
    refreshList(){
      this.getList(this.queryParams)
    },
    searchList(keyword){
      this.queryParams.page = 1;
      this.getList(keyword)
    },
    getList(keyword) {
      let urls = this.$route.fullPath.split("?");
      const api = require(`@/api/${
        this.apiUrl ? this.apiUrl : urls[0].replace("/", "")
      }/index`);
      this.loading = true;
      if (keyword) {
        if (typeof keyword == "string") {
          this.queryParams.search_value = keyword;
        } else if (typeof keyword == "object") {
          this.queryParams = { ...this.queryParams, ...keyword };
        }
      } else {
        this.queryParams.search_value = "";
      }
      if (this.apiUrl && this.apiFun) {
        api.default[this.apiFun](this.queryParams).then(
          res => {
            this.getResult(res);
          }
        ).catch(()=>{
          this.loading = false;
        })
      } else {
        api.default[this.apiFun](this.queryParams).then(res => {
          this.getResult(res);
        }).catch(()=>{
          this.loading = false;
        })
      }
    },
    getResult(res) {
      if(res.data.value){
        this.dataList = this.$attrs.formatter?this.$attrs.formatter(res.data.value):res.data.value;
        this.total = res.data.total;
      }else{
        this.dataList = this.$attrs.formatter?this.$attrs.formatter(res.data):res.data;
      }
      this.$emit("loadComplete",res.data)
      this.loading = false;
    }
  }
};
</script>
